<template>
  <div class="ratings" ref="ratings">
    <div class="ratings-wrapper">
      <!-- 1.0 上部分 综合评分模块 -->
      <div class="ratings-header">
        <!-- 1.1 左边模块 综合评分 -->
        <div class="header-left">
          <div class="score">{{ seller.score }}</div>
          <div>综合评分</div>
          <div class="rankRate">高于周边商家{{ seller.rankRate }}%</div>
        </div>
        <!-- 1.2 右边模块 服务态度 -->
        <div class="header-right">
          <div class="header-serviceScore">
            <span class="header-right-text">服务态度</span>
            <star :score="seller.serviceScore" :size="20" class="star" />
            <span class="service-score">{{ seller.serviceScore }}</span>
          </div>
          <!-- 1.2.2服务态度 -->
          <div class="header-serviceScore">
            <span class="header-right-text">服务态度</span>
            <star :score="seller.serviceScore" :size="20" class="star" />
            <span class="service-score">{{ seller.serviceScore }}</span>
          </div>
          <!-- 1.2.3 送达时间 -->
          <div class="header-deliveryTime">
            <span class="header-right-text">送达时间</span>
            <span class="deliveryTime">{{ seller.deliveryTime }}分钟</span>
          </div>
        </div>
      </div>

      <white-space />

      <!-- 2.0 下部分 评论模块-->
      <div class="ratings-bottom">
        <ratingsFilter
          :selected.sync="selected"
          :ratings="ratings"
          :onlyContent.sync="onlyContent"
          :rankbyScore.sync="rankbyScore"
          :rankbyTime.sync="rankbyTime"
          :ratingsType="ratingsType"
        />
        <!-- 2.2 评论内容 -->
        <div class="ratings-item" v-for="(item, i) in ratingsList" :key="i">
          <!-- 2.2.2.2 评论时间 -->
          <span class="ratetime">{{ formatDate(item.rateTime) }}</span>
          <!-- 2.2.1 用户头像 -->
          <div class="user-avatar">
            <img :src="item.avatar" alt="" width="28" height="28" />
          </div>

          <!-- 2.2.2 用户评论 -->
          <div class="user-ratings">
            <!-- 2.2.2.1 用户名 -->
            <span class="username">{{ item.username }}</span>

            <!-- 2.2.2.3 评分 -->
            <div class="ratings-star">
              <star :score="item.score" :size="20" class="star" />
              <span v-show="item.deliveryTime" class="deliveryTime"
                >{{ item.deliveryTime }}分钟送达</span
              >
            </div>
            <!-- 2.2.2.4 评论内容 -->
            <div class="ratings-text">{{ item.text }}</div>
            <!-- 2.2.2.5 用户点的菜 -->
            <div class="recommend" v-if="item.recommend.length != 0">
              <recommend :item="item" :type="item.rateType" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import recommend from "../components/recommend/recommend";
import ratingsFilter from "../components/ratingsFilter/ratingsFilter";
import star from "../components/star/star";
import whiteSpace from "../components/whiteSpace/whiteSpace.vue";
import { formatDate } from "../js/tools";
import BScroll from "better-scroll";
export default {
  name: "ratings",
  props: ["seller"],
  data: () => ({
    ratings: [],
    selected: 2,
    onlyContent: false,
    rankbyTime: false,
    rankbyScore: false,
    ratingsType: ["全部", "满意", "不满意"],
  }),
  components: {
    star,
    whiteSpace,
    ratingsFilter,
    recommend,
  },
  methods: {
    // 获取 ratings 数据
    async getRatingsData() {
      try {
        this.axios.get("/api/ratings").then((response) => {
          // console.log(response.data);
          // 获取到数据后，传值给本地变量，然后再传递给子组件
          this.ratings = response.data;
          this.$nextTick(() => {
            setTimeout(() => {
              // 初始化滚动对象
              this._initScroll();
            }, 10);
          });
          //console.log(this.ratings);
        });
      } catch (e) {
        console.error(e);
      }
    },
    _initScroll() {
      this.ratingsScroll = new BScroll(this.$refs.ratings, {
        click: true,
        mouseWheel: true,
      });
    },
    formatDate,
  },

  mounted() {
    this.getRatingsData();
  },
  computed: {
    ratingsList() {
      let result = this.ratings;
      // 满意
      if (this.selected === 0) {
        result = result.filter((_) => _.rateType === 0);
      }
      // 不满意
      if (this.selected === 1) {
        result = result.filter((_) => _.rateType === 1);
      }
      // 只读
      if (this.onlyContent) {
        result = result.filter((_) => _.text);
      }
      // 按时间 排序
      if (this.rankbyTime) {
        // result = result.sort((_) => _.score);
        result.sort(function (_1, _2) {
          return _2.rateTime - _1.rateTime;
        });
      }
      // 按评分 排序
      if (this.rankbyScore) {
        result.sort(function (_1, _2) {
          return _2.score - _1.score;
        });
      }
      return result;
    },
  },
};
</script>

<style lang="scss" scoped>
.ratings {
  overflow: hidden;
  position: absolute;
  top: 180px;
  bottom: 0px;
  .ratings-wrapper {
    .ratings-header {
      display: flex;
      margin: 0 auto;
      padding: 18px 0 18px 24px;
      .header-left {
        width: auto;
        font-size: $xs-size;
        color: eleblack(1);
        text-align: center;
        line-height: 12px;
        padding-right: 18px;
        border-right: 1px solid eleblack(0.1);
        .score {
          font-size: 24px;
          color: $e-yellow;
          line-height: 28px;
          margin-bottom: 6px;
        }
        .rankRate {
          margin: 8px 0 6px 0;
          color: $e-dgrey;
          line-height: 10px;
        }
      }
      .header-right {
        width: auto;
        padding-left: 24px;
        font-size: $sm-size;
        color: eleblack(1);
        line-height: 18px;
        .header-right-text {
          margin-right: 12px;
        }
        .header-serviceScore {
          margin-bottom: 8px;
          .star {
            display: inline-block;
          }
          .service-score {
            display: inline-block;
            font-size: $sm-size;
            color: $e-yellow;
            margin-left: 12px;
          }
        }
        .header-deliveryTime {
          margin-bottom: 8px;
          .deliveryTime {
            font-size: $sm-size;
            line-height: 18px;
            color: $e-dgrey;
          }
        }
      }
    }
    .ratings-bottom {
      .ratings-item {
        margin: 18px 18px 0 18px;
        padding-bottom: 18px;
        display: flex;
        position: relative;
        border-bottom: 1px solid eleblack(0.1);
        .user-avatar {
          flex: 0;
          img {
            border-radius: 28px;
          }
        }
        .user-ratings {
          margin-left: 12px;
          font-size: $xs-size;
          line-height: 12px;
          color: eleblack(1);
          .username {
            display: inline-block;
          }
          .ratings-star {
            .star {
              display: inline-block;
              margin: 4px 6px 6px 0;
            }
            .deliveryTime {
              font-weight: 200;
              color: $e-dgrey;
            }
          }

          .ratings-text {
            font-size: $sm-size;
            line-height: 18px;
            margin-bottom: 8px;
          }
        }
        .ratetime {
          position: absolute;
          right: 0px;
          top: 0px;
          font-size: $sm-size;
          color: $e-dgrey;
        }
      }
    }
  }
}
</style>
